<template>
  <div class="ad-container">
    <el-row>
      <el-col>
        <!-- 新增轮播图按钮 -->
        <el-button
          type="primary"
          class="addSwiperBtn"
          @click="addSwiperFormVisible = true"
          >新增轮播图</el-button
        >
      </el-col>
    </el-row>
    <!-- 表单 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="headClass"
    >
      <el-table-column prop="date" label="轮播图名称" min-width="160px">
      </el-table-column>
      <el-table-column prop="name" label="缩略图" width="200px">
      </el-table-column>
      <el-table-column prop="address" label="状态"> </el-table-column>
      <el-table-column prop="address" label="链接地址"> </el-table-column>
      <el-table-column prop="address" label="排序"> </el-table-column>
      <el-table-column prop="address" label="更新时间"> </el-table-column>
      <el-table-column prop="address" label="操作">
        <template>
          <el-button type="primary">删除</el-button>
          <el-button type="primary">启用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表单 -->
    <!-- 分页 -->
    <!-- <el-pagination
      :pager-count="11"
      prev-text="上一页"
      next-text="下一页"
      layout=" prev, pager, next,slot, jumper"
      :total="400"
    >
      <template><span>共128页</span></template>
    </el-pagination> -->
    <pagination></pagination>
    <!-- 新增轮播图弹出表单 -->
    <el-dialog
      title="新增轮播图"
      :visible.sync="addSwiperFormVisible"
      width="457px"
      @close="addSwiperClosed"
    >
      <el-form
        :model="addSwiperForm"
        label-position="left"
        label-width="60px"
        :rules="addSwiperRules"
        ref="addSwiperFormRefs"
      >
        <el-form-item label="名称" prop="name">
          <el-input
            v-model="addSwiperForm.name"
            autocomplete="off"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="链接" prop="link">
          <el-input
            v-model="addSwiperForm.link"
            autocomplete="off"
            placeholder="请输入链接地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="上传" prop="upload">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture"
          >
            <el-button class="upload">点击上传图片</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="addSwiperFormVisible = false"
          class="confirm"
          >确 定</el-button
        >
        <el-button @click="addSwiperFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pagination from '../../components/pagination'
export default {
  name: '',
  components: { pagination },
  props: {},
  data() {
    const checkName = (rule, value, callback) => {
      const regName = /^[\u4E00-\u9FA5A-Za-z]{3,6}$/
      if (regName.test(value)) {
        return callback()
      }
      callback(new Error('请输入合法轮播图名称'))
    }
    return {
      tableData: [],
      currentPage4: 4,
      // 添加轮播图的显示与隐藏
      addSwiperFormVisible: false,
      // 添加轮播图表单数据
      addSwiperForm: {
        name: '',
        link: '',
        pic: {}
      },
      fileList: [],
      // 表单验证规则
      addSwiperRules: {
        name: [
          { required: true, message: '请输入轮播图名称', trigger: 'blur' },
          { validator: checkName, trigger: 'blur' }
        ],
        upload: [{ required: true, message: '请上传图片', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    headClass() {
      return 'background: linear-gradient(0deg, #DFE1E6, #FAFBFF);text-align:center'
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    // 监听添加轮播图对话框关闭事件
    addSwiperClosed() {
      this.$refs.addSwiperFormRefs.resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
.ad-container {
}
.addSwiperBtn {
  width: 160px;
  height: 30px;
  background: #663ee7;
  border-radius: 3px;
  line-height: 0px;
  margin-bottom: 20px;
}
.el-table {
  height: 724px;
}
/deep/ .el-dialog {
  box-sizing: border-box;
  padding: 0 50px 0 30px;
  .el-dialog__header {
    text-align: center;

    font-size: 20px;
    font-family: 'PingFang SC';
    font-weight: 500;
    color: #343434;
  }
  .el-dialog__body {
    padding: 0 !important;
    padding-top: 20px !important;
  }
  .upload {
    width: 317px !important;
    text-align: left;
  }
  .el-dialog__footer {
    display: flex;
    justify-content: space-around;
    padding: 0 0 38px !important;

    .confirm {
      background-color: #6664ff;
      margin-right: 43px !important;
    }
  }
  /deep/ .el-form {
    .el-form-item {
      .el-form-item__label {
        text-align: right !important;
      }
    }
  }
}
</style>
